<template>
	<div class="flex-row">
		<xbc-message-read v-if="message && message.createTime" :show="showReadStatus && !['group'].includes(message.conversationType) && isSenderThemselve" :isRead="isRead" />
		<xbc-loading v-if="!message.createTime"></xbc-loading>
		<image
			class="chat-message-image"
			:style="style" 
			:class="{reverse: isReverse && isSenderThemselve}"
			:src="thumbUrl"
			@tap="preview"/>
	</div>
</template>

<script lang="ts" setup>
import { reactive, computed } from 'vue'
import { messageProps, useMessage } from '@/hooks/useMessage'
import XBCIM from 'xbcim'

const size = reactive({ width: 0, height: 0 })
const props = defineProps(messageProps)
const { isSenderThemselve, isRead, messageContent } = useMessage(props)
const thumbUrl = computed(() => {
	return messageContent.value?.data?.thumbUrl || messageContent.value?.data?.url
})
const style = computed(() => {
	const { width, height } = messageContent.value?.data
	if (!width || !height) {
		uni.getImageInfo({
			src: thumbUrl.value,
			success: ({ width: imgWidth, height: imgHeight }) => {
				size.width = imgWidth
				size.height = imgHeight
			}
		})
	} else {
		size.width = width
		size.height = height
	}

	return XBCIM.util.getImageSize(size.width, size.height, 200)
})

function preview(){
	uni.previewImage({
		urls: [messageContent.value?.data?.url]
	})
}

// 右键菜单
const commands = [
	{ name: '引用', command: 'quote' },
	{ name: '删除', command: 'deleteMessage' }
]
</script>

<style lang="scss" scoped>
.chat-message-image {
	border-radius: 0 10rpx 10rpx 10rpx;

	&.reverse {
		border-radius: 10rpx 0 10rpx 10rpx;
	}
}
</style>